<template>
	<view class="calendar">
		<!-- 第一行显示周几 -->
		<view class="week-days">
			<text class="day">日</text>
			<text class="day">一</text>
			<text class="day">二</text>
			<text class="day">三</text>
			<text class="day">四</text>
			<text class="day">五</text>
			<text class="day">六</text>
		</view>

		<!-- 日期行显示 -->
		<view class="days">
			<view class="week-row" v-for="(week, weekIndex) in weeks" :key="weekIndex">
				<text v-for="(day, index) in week" :key="index" :class="['day-item', {
					'highlight': isToday(day),
					'selected': selectedDay === day,
					'disabled': isDisabled(day)
				}]" @click="onDayClick(day)">
					{{ day }}
				</text>
			</view>
		</view>
	</view>
</template>

<script setup>
import {
	ref,
	onMounted,
	defineEmits,
	watch
} from 'vue';

const emits = defineEmits(['changeDate'])

const props = defineProps({
	confirmDate: {
		type: Object,
		default: () => ({})
	}
})

// 获取当前日期
const today = new Date();
const currentYear = today.getFullYear();
const currentMonth = today.getMonth();
const currentDate = today.getDate();

// 存储日期
const weeks = ref([]);
const selectedDay = ref(null); // 存储被选中的日期
selectedDay.value = props.confirmDate.day // 初始化时设置为 props.confirmDate 的日期

// 获取今天是星期几，0=星期天，6=星期六
const getDayOfWeek = (date) => {
	return date.getDay(); // 返回0-6，0表示星期日
};

// 判断是否是今天
const isToday = (day) => {
	return day === currentDate;
};

// 判断日期是否在有效范围内（7天以内）
const isDisabled = (day) => {
	// 如果日期小于今天，或者大于今天后的7天，视为禁用
	const targetDate = new Date(today);
	targetDate.setDate(today.getDate() + day - currentDate); // 计算具体的目标日期
	const diffDays = (targetDate - today) / (1000 * 3600 * 24); // 计算日期差
	return diffDays < 0 || diffDays > 6; // 小于0表示今天之前，大于6表示7天以外
};

// 生成今天开始的日期，跨两周显示
const generateCalendar = () => {
	const days = [];
	const startDayOfWeek = getDayOfWeek(today); // 今天是星期几

	// 计算从今天开始，跨两周显示所有日期
	for (let i = -startDayOfWeek; i < 14 - startDayOfWeek; i++) {
		const date = new Date(today);
		date.setDate(today.getDate() + i);
		days.push(date.getDate());
	}

	// 将日期分配到每周的7天
	let week = [];
	for (let i = 0; i < days.length; i++) {
		const dayOfWeekIndex = i % 7; // 每7天为一周
		if (week[dayOfWeekIndex]) {
			week.push(days[i]);
		} else {
			week[dayOfWeekIndex] = days[i];
		}

		// 每7天组成一周
		if (week.length === 7) {
			weeks.value.push([...week]);
			week = [];
		}
	}

	if (week.length) {
		weeks.value.push(week); // 处理最后一周
	}
};

// 处理日期点击
const onDayClick = (day) => {
	if (!isDisabled(day)) {
		selectedDay.value = day; // 设置被选中的日期
		// 可在此添加回调或其他操作，比如通知父组件
		let date = {
			year: currentYear,
			month: currentMonth + 1,
			day: day
		}
		emits('changeDate', date);
	}
};

// 组件挂载时生成日历
onMounted(() => {
	generateCalendar();
});
</script>

<style lang="scss" scoped>
.calendar {
	background-color: rgba(255, 255, 255, 0.95);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
	animation: fadeIn 0.3s ease-out;
}

.week-days {
	padding: 5px;
	background: linear-gradient(135deg, #22c4ff, #2196f3);
	display: flex;
	justify-content: space-between;
}

.day {
	color: white;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 500;
}

.days {
	padding: 10px;
	display: flex;
	flex-direction: column;
}

.week-row {
	display: flex;
	justify-content: space-between;
	margin-bottom: 10px;
	
	&:last-child {
		margin-bottom: 0;
	}
}

.day-item {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	color: #333;
	transition: all 0.15s ease;
	
	&:not(.disabled):active {
		transform: scale(0.95);
	}
}

.highlight {
	background-color: #4cd964;
	color: white;
	font-weight: 500;
}

.selected {
	background-color: #2196f3;
	color: white;
	font-weight: 500;
	box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3);
}

.disabled {
	color: #cccccc;
	cursor: not-allowed;
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
</style>